import React from 'react';
import { Routes, Route } from 'react-router-dom';
import Loading from '@/components/Loading';

import routes from './routes';

const loadPage = (page: any, props = {}) => {
    if (page.element) {
        const StaticComp = page.element;
        return <StaticComp {...props} />;
    }

    if (page.url) {
        const LazyComp = React.lazy(() => import(/* @vite-ignore */ page.url));
        return (
            <React.Suspense fallback={<Loading />}>
                <LazyComp {...props} />
            </React.Suspense>
        );
    }

    if(page.items){
        return null;
    }

    return (
        <div className="p-4 w-100 text-center text-red-500">
            ⚠ 页面<span style={{ fontWeight: 'bolder', padding: '0 4px', color: '#eb081d'}}>({page.path})</span>组件未配置：请检查配置项是否缺少 <code>element</code> 或 <code>url</code>
        </div>
    );
}

export default () => {
    return (
        <div className="login-module">
            <Routes>
                {
                    routes.map((page, index) => {
                        const _element = loadPage(page, page);
                        return (
                            <Route key={index} path={page.path} element={_element} ></Route>
                        );
                    })
                }
            </Routes>
        </div>
    );
}